<template>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1baeae" :style="height?'height:'+ height:''" @change="onChange">
    <van-swipe-item v-for="(item, index) in list" :key="index" style="z-index:9999;">
      <img :src="item.imgUrl" alt="" @click="isGoTo?goTo(item.routeUrl):vanImagePreview()">
    </van-swipe-item>
    <van-image-preview />
  </van-swipe>
</template>

<script>
import { ImagePreview } from 'vant';
export default {
  props: {
    list: { type:Array, require:true, },
    height: { type: String, default: null },
    isGoTo: { type: Boolean, default: false },
  },
  setup(props){
    const vanImagePreview = ()=>{
      const imgList = [] 
      props.list.forEach(item => {
        imgList.push(item.imgUrl)
      });
      ImagePreview({
        images: imgList,
        closeable: true,
        showIndicators: true,
        startPosition: indexSwipe,
        overlayStyle:{
          zIndex:9999,
        }
      });
    }
    const goTo = (url) =>{
      console.log(url);
      return
    }
    let indexSwipe = 0
    const onChange = (index) => {
      indexSwipe = index
    }
    return {
      vanImagePreview,
      goTo,
      onChange
    }
  },
}
</script>

<style lang='less' scoped>
  .my-swipe {
    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
